<template>
  <div class="app-container">
    <div class="filter-item-table">
      <el-table
        :data="dataDetail"
        :cell-style="{ textAlign: 'center', fontSize: '13px' }"
        :header-cell-style="{
          textAlign: 'center',
          fontWeight: '100',
          fontSize: '13px',
          color: 'white',
          backgroundColor: '#009688'
        }"
      >
        <el-table-column label="订单编号" prop="orderId" />
        <el-table-column label="送货地址" prop="deliveryAddress" />
        <el-table-column label="预定送货时间" prop="deliveryStartTime" />
        <el-table-column label="剩余时间" prop="deliveryEndTime" />
        <el-table-column label="订单类型" prop="orderType" />
        <el-table-column label="订单备注" prop="orderRemark" />
      </el-table>
    </div>
    <div class="filter-item-right">
      <span style="font-size: 13px; font-weight: 600; color: #009688">动态</span>
      <el-timeline style="max-width: 600px">
        <el-timeline-item
          v-for="item in deliveryRecordList"
          :key="item.id"
          center
          :timestamp="item.orderType + '-' + item.operatingTime"
          placement="top"
        >
          <span>{{ item.orderType == "1" ? "销售订单" : "售后订单" }}-{{ item.orderNumber }}</span>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="filter-item-left">
      <div v-for="item in goodsDetail" :key="item.goodsId" class="filter-item-left-table">
        <div class="left-table-title">
          <span>{{ item.goodsName }}({{ item.goodsId }})</span>
        </div>
        <div>
          <el-table
            :data="item.specs"
            :cell-style="{ textAlign: 'center', fontSize: '13px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
          >
            <el-table-column label="商品规格" prop="specsName" />
            <el-table-column label="所需份数" prop="specsNumber" />
            <el-table-column label="实际份数" prop="quantity" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script name="sortDetail" lang="ts" setup>
import { OrderDetail } from "@/api/interface/city/dispatch";
import { getOrderDetailAPI } from "@/api/modules/city/dispatchAPI";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const dataDetail = ref<OrderDetail.Detail[]>([]);
const goodsDetail = ref<OrderDetail.Good[]>([]);
const deliveryRecordList = ref<OrderDetail.DeliveryRecordList[]>([]);
const getDispatchDetail = async () => {
  const { code, data, msg } = await getOrderDetailAPI(Number(route.query.id));
  if (code == "200" && data) {
    if (data.detail) {
      dataDetail.value.push(data.detail);
    }
    if (data.goods) {
      goodsDetail.value = data.goods;
    }
    if (data.deliveryRecordList) {
      deliveryRecordList.value = data.deliveryRecordList;
    }
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getDispatchDetail();
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 15px;
  background-color: white;
}
.filter-item-table {
  margin-bottom: 20px;
}
.filter-item-left {
  display: inline-block;
  width: 57%;
  padding: 10px;
  vertical-align: top;
  border: 1px solid #e0e0e0;
  .filter-item-left-title {
    padding: 15px 0;
    span {
      font-size: 13px;
      font-weight: 600;
      color: cornflowerblue;
    }
  }
  .filter-item-left-table {
    .left-table-title {
      padding: 10px 0;
      font-size: 13px;
      color: gray;
    }
  }
}
.filter-item-right {
  display: inline-block;
  width: 39%;

  // border: 1px solid red;
  padding: 10px;
  vertical-align: top;
  border: 1px solid #e0e0e0;
  .content {
    padding: 8px;
    span {
      display: inline-block;
      padding: 3px 15px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
    }
    span:nth-last-child(1) {
      float: right;
    }
    .name {
      color: white;
      background: #009688;
      border-radius: 10px;
    }
  }
  .btn-container {
    margin-top: 130px;
    text-align: right;
  }
}
</style>
